<template>
  <div>
    <h1>首页</h1>
    <hr>
    <h1 class="blue">{{ count }}</h1>
    <button @click="handleIncrementMoreM"> + 10 </button>
    <button @click="handleIncrementMore"> + 5 </button>
    <button @click="handleIncrement"> + 1 </button>
    <button @click="handleDecrease"> - 1 </button>
    <hr>
    <div>{{ list }}</div>
    <div>{{ listCount }}</div>
    <hr>
    <button @click="handleActionIncrement">action + 1</button>
    <hr> {{ currentMessage }} <br>
    <button @click="handleAsyncIncrement">async + 1</button>
    <hr>
    <router-link to="/about">跳到about</router-link>
  </div>
</template>
<script>
  console.log("这是 vuex")
  export default {
    props: {
      message: {
        type: String,
        default: '异步提交消息'
      }
    },
    data: function() {
      var msg = this.message
      return {
        currentMessage: msg
      }
    },
    computed: {
      count() {
        return this.$store.state.count
      },
      list() {
        // return this.$store.state.list.filter(item => item < 10)
        return this.$store.getters.filteredList
      },
      listCount() {
        return this.$store.getters.listCount
      },
      getMessage() {
        return this.message
      }
    },
    methods: {
      handleIncrement() {
        this.$store.commit("increment")
      },
      handleIncrementMore() {
        this.$store.commit("increment", 5)
      },
      handleIncrementMoreM() {
        this.$store.commit({
          type: 'incrementM',
          count: 10
        })
      },
      handleDecrease() {
        this.$store.commit("decrease")
      },
      handleActionIncrement() {
        this.$store.dispatch('increment').then(() => {
          console.log('hhhhhhhhhhhh')
        })
      },
      handleAsyncIncrement() {
        let x = 0
        let msg = '已提交异步变更请求'
        var id = setInterval(() => {
          x++
          if (x === 0)
            this.currentMessage = msg + '.'
          if (x === 1)
            this.currentMessage = msg + '..'
          if (x === 2) {
            this.currentMessage = msg + '...'
            x = 0
          }
        }, 100);
        this.$store.dispatch('asyncIncrement').then(() => {
          clearInterval(id)
          this.currentMessage = '完成异步变更请求'
          console.log(this.$store.state.count);
        })
      }
    }
  };
</script>

<style scoped>
  div {
    color: #f60;
    font-size: 24px;
  }
  .blue {
    color: #0080ff;
  }
</style>
